<template>
  <!-- 直播 -->
  <div class="center-wrap" id="bili_live">
    <BannerAd :bannerimg='bannerimg'></BannerAd>
    <div class="live-container">
      <!-- 左侧直播列表 -->
      <div class="live-left-list">
        <StoreyTitle :title='Livetitle'>
          <svg slot='svg' t="1594799360602" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3766" width="200" height="200"><path d="M392.448 275.911a92.416 92.416 0 1 1-184.832 0 92.416 92.416 0 0 1 184.832 0" fill="#23ADE5" p-id="3767"></path><path d="M826.624 464.583l-63.744 36.864v-48.64a72.206 72.206 0 0 0-71.68-71.936H190.72a72.192 72.192 0 0 0-71.936 71.936v295.424a71.936 71.936 0 0 0 71.936 71.936H691.2a71.936 71.936 0 0 0 71.936-71.936v-23.808l63.488 37.888a51.2 51.2 0 0 0 76.8-44.544V508.871a51.2 51.2 0 0 0-76.8-44.288m-253.696-95.232c79.46 0.142 143.986-64.156 144.128-143.616 0.142-79.46-64.156-143.986-143.616-144.128-79.26-0.142-143.701 63.858-144.128 143.104-0.427 79.46 63.644 144.213 143.104 144.64h0.512" fill="#48CFE5" p-id="3768"></path><path d="M425.216 512.967l124.16 71.936a25.6 25.6 0 0 1 0 42.496l-124.16 71.68a25.6 25.6 0 0 1-37.12-21.248v-143.36a25.6 25.6 0 0 1 37.12-21.504" fill="#FDDE80" p-id="3769"></path></svg>
          <div slot='title' class="live-text-info"><span>当前共有{{liveingnum}}个在线直播</span></div>
        </StoreyTitle>
        <div class="liveing-list-container">
          <div class="liveing-item" v-for="(item,index) in liveinglist" :key="index">
            <div class="liveing-item-content" >
              <!-- <div class="liveing-item-linebar" @mouseenter="liveingEnter(index)" @mouseleave="liveingLeave(index)"> -->
              <div class="liveing-item-linebar" >
                <img :src="item.img" alt="">
                <p class="liveing-item-count">
                  <i class="iconfont icon-people"></i>
                  {{item.num}}
                </p>
                <div class="iveing-item-mask" ref="iveingItemMask" :style="'background-image:url('+item.img2+')'"></div>
              </div>
              <div class="liveing-up-info">
                <div class="liveing-up-avatar">
                  <img :src="item.avatar" alt="">
                  <span v-if="item.icon" :style="'background-image:url('+item.icon+')'"></span>
                </div>
                <div class="liveing-up-text">
                  <p class="liveing-up-name">{{item.name}}</p>
                  <p>{{item.intro}}</p>
                  <p>{{item.type}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧直播排行 -->
      <div class="liveing-right-tabs">
        <div class="liveing-right-switch">
          <div class="liveing-right-switch-item" v-for="(item,index) in liveingswitch" :key="index" @click="switchClick(index)" :class="{liveswitchActive:index == switchindex}">
            {{item}}
          </div>
        </div>
        <div class="liveing-rank" v-for="(item,index) in liverightlist" :key="index" v-show="index == switchindex">
          <div class="liveing-rank-item" v-for="(items,indexs) in item" :key="indexs">
            <div class="liveing-rank-infobox">
              <span v-if="index==0" class="liveing-rank-upindex" :class="indexs <= 2 ? 'upindexActive' : ''">{{indexs+1}}</span>
              <img :src="items.img" alt="">
              <div class="liveing-rank-text">
                <p class="liveing-rank-upname">{{items.name}}</p>
                <p>{{items.intro}}</p>
              </div>
            </div>
            <div class="liveing-rank-num">
              <i class="iconfont icon-people"></i>
              {{items.num}}
            </div>
          </div>
        </div>
        <RightRotation v-show="switchindex==2" :rotationheight='rotationheight' :rotationlist='liveingrotationlist'></RightRotation>
      </div>
    </div>
  </div>
</template>

<script>
  import BannerAd from '../public/BannerAd.vue'
  import StoreyTitle from '../public/StoreyTitle.vue'
  import RightRotation from '../public/RightRotation.vue'
  export default{
    name:'LiveList',
    components:{
      BannerAd,
      StoreyTitle,
      RightRotation
    },
    data(){
      return{
        //顶部组件数据
        bannerimg:require('../../assets/img/banner_ad3.jpg'),
        iconfont:'iconfont icon-zhibo',
        Livetitle:'正在直播',
        iconcolor:'rgb(72, 207, 229)',
        liveingnum:'16519',
        // 正在直播列表
        liveinglist:[
          {img:require('../../assets/img/liveing_img1.jpg'),img2:require('../../assets/img/liveing_img1-1.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习',icon:'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg'},
          {img:require('../../assets/img/liveing_img2.jpg'),img2:require('../../assets/img/liveing_img2-2.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习'},
          {img:require('../../assets/img/liveing_img3.jpg'),img2:require('../../assets/img/liveing_img3-3.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习',icon:'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg'},
          {img:require('../../assets/img/liveing_img4.jpg'),img2:require('../../assets/img/liveing_img4-4.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习'},
          {img:require('../../assets/img/liveing_img1.jpg'),img2:require('../../assets/img/liveing_img1-1.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习'},
          {img:require('../../assets/img/liveing_img2.jpg'),img2:require('../../assets/img/liveing_img2-2.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习',icon:'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg'},
          {img:require('../../assets/img/liveing_img3.jpg'),img2:require('../../assets/img/liveing_img3-3.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习'},
          {img:require('../../assets/img/liveing_img4.jpg'),img2:require('../../assets/img/liveing_img4-4.jpg'),avatar:require('../../assets/img/live_avatar.jpg'),num:'7.4万',name:'一个人的世界',intro:'亦将高歌不止 即便不见天日',type:'学习',icon:'http://s2.hdslb.com/bfs/static/blive/bpfe-dynamic-nav-iframe/static/img/verify_0.6e59734b.svg'},
        ],
        //直播排行切换
        switchindex:2,
        liveingswitch:[
          '直播排行','关注的主播','为你推荐'
        ],

        liverightlist:[
          [
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
          ],
          [
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
            {img:require('../../assets/img/live_avatar.jpg'),name:'一个人的世界',intro:'今天又是学习的一天',num:'43.3万'},
          ]
        ],
        rotationheight:'330px',//右侧轮播高度
        liveingrotationlist:[//右侧轮播数据
          {img:require('../../assets/img/recommend_img1.jpg'),title:'夏日沙滩清凉季'},
          {img:require('../../assets/img/recommend_img2.jpg'),title:'公会招募扶持计划，千万奖励重磅来袭！'},
        ]
      }
    },
    methods:{
      // liveingEnter(index){
      //   this.$refs.iveingItemMask[index].classList.add('liveingActive1')
      //   this.$refs.iveingItemMask[index].classList.remove('liveingActive')
      // },
      // liveingLeave(index){
      //   this.$refs.iveingItemMask[index].classList.add('liveingActive')
      // }
      switchClick(index){
        this.switchindex = index
      }
    }
  }
</script>

<style scoped>
  .live-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .live-text-info{
    /* display: flex;
    align-items: center; */
    color:#505050;
    line-height: 36px;
  }
  .live-text-info>span{
    margin-right: 24px;
  }
 /* .live-left-list{
    width: 854px;
  } */
  .liveing-list-container{
    width: 854px;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 404px;
  }
  .liveing-item{
    width: 206px;
  }
  .liveing-item-content{
    width: 100%;
    height:100%;
  }
  .liveing-item-linebar{
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
    width: 100%;
    height:116px;
  }
  .liveing-item-linebar::before{
    content: "";
    position: absolute;
    width: 100%;
    height:48px;
    bottom: 0;
    left:0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .5));
    border-radius: 0 0 2px 2px;
  }
  .liveing-item-linebar>img{
    width: 100%;
    height:100%;
    border-radius: 2px;
  }
  .liveing-item-count{
    position: absolute;
    padding:6px 8px;
    bottom:0;
    left:0;
    font-size: 12px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color:#fff;
    line-height: 16px;
  }
  .liveing-item-count>i{
    vertical-align: middle;
    font-size: 16px;
    margin-right: 4px;
  }
  .iveing-item-mask{
    position: absolute;
    width:100%;
    height:100%;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top:0;
    left:0;
    transform: translateY(-6%);
    opacity: 0;
    transition: all .3s ease-out;
  }
/*  .liveingActive1{
    transform: translateY(0%);
   }
  .liveingActive{
    transform: translateY(-7%);
  } */
  .liveing-item-linebar:hover .iveing-item-mask{
    transform: translateY(0%);
    opacity: 1;
  }
  .liveing-up-info{
    display: flex;
    justify-content: space-between;
    line-height: 16px;
    cursor: pointer;
  }
  .liveing-up-avatar{
    position: relative;
  }
  .liveing-up-avatar>img{
    width: 36px;
    height:36px;
    display: inline-block;
    border-radius: 50%;
    background: #f7f7f7;
  }
  .liveing-up-avatar>span{
    position: absolute;
    right: -4px;
    top: 23px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    background-size: cover;
  }
  .liveing-up-text{
    width:158px;
  }
  .liveing-up-text>p{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .liveing-up-text>p:nth-child(1){
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
  .liveing-up-text>p:nth-child(2){
    font-size: 12px;
    line-height: 18px;
    color:#505050;
    margin-top: 2px;
  }
  .liveing-up-text>p:nth-child(3){
    font-size: 12px;
    color:#999;
    margin-top: 8px;
    line-height: 16px;
  }

  .liveing-item-content:hover .liveing-up-name{
    color:#00A1D6;
  }

  .liveing-right-tabs{
    width: 320px;
  }
  .liveing-right-switch{
    display: flex;
    height: 36px;
    margin:0 16px 16px 0;
    align-items: center;
  }
  .liveing-right-switch-item{
    font: 12px;
    line-height: 18px;
    height: 22px;
    margin-right: 12px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .liveswitchActive{
    color:#00A1D6;
    border-bottom: 1px solid #00A1D6;
  }
  .liveing-rank{
    width: 100%;
  }
  .liveing-rank-item{
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    cursor: pointer;
  }
  .liveing-rank-infobox{
    display: flex;
    align-items: center;
  }
  .liveing-rank-upindex{
    font-size: 14px;
    color:#999;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    margin-right: 12px;
  }
  .upindexActive{
    background: #00A1D6;
    color:#fff;
  }
  .liveing-rank-infobox>img{
    width: 44px;
    height:44px;
    border-radius:50%;
    margin-right: 12px;
  }
  .liveing-rank-text{
    margin-right: 10px;
    display: inline-block;
    width: 158px;
    vertical-align: middle;
  }
  .liveing-rank-upname{
    font-size: 14px;
    font-weight: 500;
  }
  .liveing-rank-text>p{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
   .liveing-rank-text>p:nth-child(2){
     color:#505050;
     line-height: 18px;
     margin-top: 2px;
   }
   .liveing-rank-num{
     color:#999;
     font-size: 12px;
     display: flex;
     white-space: nowrap;
     margin-top: 4px;
   }
   .liveing-rank-num>i{
     margin-right: 4px;
     /* font-size: 16px; */
     /* vertical-align: middle; */
   }
   .liveing-rank-item:hover .liveing-rank-upname{
     color:#00A1D6;
   }
</style>
